﻿
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="content-type" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
    <title>home</title>

    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/element/index.css">

    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
<div id="wrapper" v-cloak>
    <!--导航栏-->
    <div style="width: 200px; float: left">
        <div class="sideMenu">
            <div class="head">文件管理系统</div>
            <ul>
                <li class="nLi on">
                    <h3><i class="fa fa-dashboard"></i>首页<span class="fa fa-angle-up arrow"></span></h3>
                    <ul class="sub">
                        <li><a href="index.html" class="active"><i class="fa fa-dashboard"></i>首页</a></li>
                    </ul>
                </li>
                <li class="nLi on">
                    <h3><i class="fa fa fa-dashboard icon"></i>信息展示<span class="fa fa-angle-up arrow"></span>
                    </h3>
                    <ul class="sub">
						<li v-if="authority.indexOf(1) != -1">
							<a href="adminInfo.html"><i class="fa fa-table"></i>管理员信息</a>
						</li>
						<li v-if="authority.indexOf(2) != -1">
							<a href="userInfo.html"><i class="fa fa-table"></i>用户信息</a>
						</li>
						<li v-if="authority.indexOf(3) != -1">
							<a href="typeInfo.html"><i class="fa fa-table"></i>文件分类</a>
						</li>
						<li v-if="authority.indexOf(4) != -1">
							<a href="fileInfo.html"><i class="fa fa-table"></i>文件信息</a>
						</li>

                        <li>
                            <a href="javascript:void(0)" @click="personalPage"><i class="fa fa-user"></i>个人信息</a>
                        </li>
                    </ul>
                </li>

                <li class="nLi">
                    <h3><i class="fa fa-unlock-alt"></i>修改密码<span class="fa fa-angle-up arrow"></span></h3>
                    <ul class="sub">
                        <li>
                            <a href="updatePassword.html"><i class="fa fa-unlock-alt"></i>修改密码</a>
                        </li>
                    </ul>
                </li>
                <li class="nLi">
                    <h3><i class="fa fa-power-off"></i>退出登录<span class="fa fa-angle-up arrow"></span></h3>
                    <ul class="sub">
                        <li>
                            <a href="javascript:void(0)" @click="logout"><i class="fa fa-power-off"></i>退出登录</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!--主体-->
    <div style="margin-left: 200px; position: relative">
        <!-- 多余的盖住边框线        -->
        <div style="height: 60px; width: 10px; background-image: linear-gradient(to bottom, #26a3de,#057db5); position: absolute;left: -1px"></div>
        <!-- 头部开始 -->
        <div style="width: 100%;height: 60px;line-height: 60px; background-image: linear-gradient(to bottom, #26a3de,#057db5); display: flex">
            <div style="flex: 1; font-size: 16px; padding: 0 20px"><a class="fa fa-user" style="color: white;" href="javascript:void(0)" @click="personalPage">{{user.name}}</a></div>
            <div style="flex: 1; text-align: right">
                <!--                <a href="" style="font-size: 16px; color: white; margin:0 10px">你好，管理员</a>-->
                <a href="javascript:void(0)" @click="logout" class="fa fa-sign-out" style="font-size: 16px; color: white; margin:0 10px">退出</a>
            </div>
        </div>
        <!-- 头部结束 -->


        <!-- 主体开始 -->
        <div id="main">
            <div style="color: black; background-color: #fff; padding: 10px 20px; font-style: italic; font-size: 20px">数据概览</div>
            <div>
                <!-- 色块 -->
                <div style="display: flex; flex-wrap: wrap; justify-content: space-start; background-color: white; border-bottom: 1px solid #ccc; padding: 10px">
						<div style="width: 10%; margin-right: 10px; margin-bottom: 10px;">
							<div style="display: flex; text-align: center; font-weight: bold; color: #666">
								<div style="flex: 2; border-radius: 5px; padding: 10px 0;background-image: linear-gradient(to bottom, #eee,#ddd); border: 1px solid #ddd;">管理员总数<br>{{totalInfo.adminInfo}}</div>
							</div>
						</div>
						<div style="width: 10%; margin-right: 10px; margin-bottom: 10px;">
							<div style="display: flex; text-align: center; font-weight: bold; color: #666">
								<div style="flex: 2; border-radius: 5px; padding: 10px 0;background-image: linear-gradient(to bottom, #eee,#ddd); border: 1px solid #ddd;">用户总数<br>{{totalInfo.userInfo}}</div>
							</div>
						</div>
						<div style="width: 10%; margin-right: 10px; margin-bottom: 10px;">
							<div style="display: flex; text-align: center; font-weight: bold; color: #666">
								<div style="flex: 2; border-radius: 5px; padding: 10px 0;background-image: linear-gradient(to bottom, #eee,#ddd); border: 1px solid #ddd;">文件总数<br>{{totalInfo.fileInfo}}</div>
							</div>
						</div>
<!--						<div style="width: 10%; margin-right: 10px; margin-bottom: 10px;">-->
<!--							<div style="display: flex; text-align: center; font-weight: bold; color: #666">-->
<!--								<div style="flex: 2; border-radius: 5px; padding: 10px 0;background-image: linear-gradient(to bottom, #eee,#ddd); border: 1px solid #ddd;">公告信息<br>{{totalInfo.advertiserInfo}}</div>-->
<!--							</div>-->
<!--						</div>-->

                </div>
            </div>

            <!-- echarts -->
            <div style="margin-top: 10px; padding: 0 10px">
                <div>
                    <div style="padding: 10px; border-radius: 10px 10px 0 0; color: #000; background-color: #ddd;">
                        <select style="margin-left: 10px" @change="drawLine"
                                v-model="echartsModel">
                            <option v-for="item in echartsModelOptions" :key="item.value" :value="item.value">{{item.label}}</option>
                        </select>
                        <select style="float:right" @change="selectEchartsType" v-model="echartsType">
                            <option value="pie">饼图</option>
                            <option value="bar">柱状图</option>
                        </select>
                    </div>
                    <div style="background-color: #fff; border: 1px solid #ccc; display: flex">
                        <div style="flex: 1">
                            <div id="echartMain" style="width: 100%;height:400px;"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- 主体结束 -->
    </div>
</div>

<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/my.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/vue2.6.11/vue.min.js"></script>
<script src="../js/vue2.6.11/axios.js"></script>
<script src="../js/echarts.min.js"></script>
<script src="../js/element/index.js"></script>

<script>

    new Vue({
        el: "#wrapper",
        data: {
            totalInfo: {},
            user: {},
            authority: [],
            echartsModelOptions: [],
            echartsModel: '',
            echartsShowArr: [],
            echartsType: 'pie'
        },
        created: function () {
            this.user = JSON.parse(localStorage.getItem("user"));

            /**
             *获取标签
             * "label": "管理员信息",
             * "value": "adminInfo"
             */
            axios.get('/echarts/options').then(res => {
                this.echartsModelOptions = res.data.data;
                if (this.echartsModelOptions.length) {
                    this.echartsModel = this.echartsModelOptions[0].value;
                    this.drawLine();
                }
            });
            /**
             * 通过request获取当前的管理员信息，从而确定当前用户拥有的权限，获取到moduleid
             * "data": [
             *         1,
             *         1000001,
             *         2,
             *         3,
             *         4,
             *         5
             *     ]
             */
            axios.get("/authority").then(res => {
                if (res.data.code === '0') {
                    this.authority = res.data.data;
                } else {
                    msg('error', res.data.msg);
                }
            });

            /**
             * 获取所有的用户，管理员，文件数目
             */
            axios.get("/getTotal").then(res => {
                if (res.data.code === '0') {
                    this.totalInfo = res.data.data;
                }
            });
        },
        methods: {
            drawLine() {
                axios.get('/echarts/get/' + this.echartsModel).then(res => {
                    // 基于准备好的dom，初始化echarts实例
                    this.echartsShowArr = res.data.data;
                    if (this.echartsShowArr.length) {
                        let myChart = echarts.init(document.getElementById('echartMain'));
                        let option = this.getEchartsType(this.echartsShowArr, this.echartsType);
                        myChart.setOption(option, true);
                    }
                });
            },
            selectEchartsType() {
                let myChart = echarts.init(document.getElementById('echartMain'));
                let option = this.getEchartsType(this.echartsShowArr, this.echartsType);
                myChart.setOption(option, true);
            },
            getEchartsType(echartsArr, type) {
                for (let item of echartsArr) {
                    if (item.series[0].type === type) {
                        return item;
                    }
                }
            },
            logout() {
                logout();
            }
        }
    });


</script>

</body>
</html>
